<template>
  <div class="role-lists">
    <!-- <el-card class="border-none" shadow="never">
      <el-form style="margin-bottom: -16px" :model="formData" inline>
        <el-form-item label="管理员账号">
          <el-input
            v-model="formData.account"
            class="w-[280px]"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>
        <el-form-item label="管理员名称">
          <el-input
            v-model="formData.name"
            class="w-[280px]"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
      
        </el-form-item>
      </el-form>
    </el-card> -->

    <el-card class="border-none" shadow="never">
      <div>
        <el-button
          v-perms="['auth.role/add']"
          type="primary"
          @click="handleAdd"
        >
          <template #icon>
            <el-icon><Plus /></el-icon>
          </template>
          新增
        </el-button>
      </div>
      <div class="m-t-15" v-loading="tableObj.loading">
        <div>
          <el-table
            :data="tableObj.lists"
            size="large"
            row-key="id"
            default-expand-all
          >
            <!-- <el-table-column prop="id" label="ID" min-width="100" /> -->
            <el-table-column
              prop="permission_name"
              label="名称"
              min-width="150"
            />
            <el-table-column prop="icon" label="图标" min-width="80">
              <template #default="{ row }">
                <el-icon><component :is="row.icon"></component></el-icon>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" min-width="80">
              <template #default="{ row }">
                <el-tag class="ml-2" type="info" v-if="row.type == 0">目录</el-tag>
                <el-tag class="ml-2" type="success" v-if="row.type == 1">页面</el-tag>
                <el-tag class="ml-2" v-if="row.type == 2">按钮</el-tag>
              
              </template>
            </el-table-column>
            <el-table-column prop="route" label="路由" min-width="200" />
            <el-table-column
              prop="component"
              label="视图文件"
              min-width="200"
            />
            <el-table-column prop="weigh" label="权重" min-width="60" />
            <el-table-column
              prop="create_time"
              label="创建时间"
              min-width="120"
            />
            
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button
                  link
                  type="primary"
                  v-perms="['auth.role/edit']"
                  @click="handleEdit(row)"
                >
                  编辑
                </el-button>
                <el-button
                  v-perms="['auth.role/delete']"
                  link
                  type="danger"
                  @click="handleDelete(row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end mt-4">
          <pagination v-model="pager" @change="getLists" />
        </div>
      </div>
    </el-card>
    
    <edit-dialog
      v-if="showEdit"
      ref="editRef"
      @success="getLists"
      @close="showEdit = false" 
    />
  </div>
</template>

<script>
import api from "@/app/admin/api";
import editDialog from './edit.vue';
import feedback from '@/lite/utils/feedback'
export default {
  components: {
    editDialog
  },
  data() {
    return {
      showEdit:false,
      formData: {},
      tableObj: {
        loading: false,
        lists: [],
      },
    };
  },
  mounted() {
    this.getLists();
  },
  methods: {
    async getLists() {
      let { data } = await api.menu.list();
      this.tableObj.lists = data;
    },
    handleAdd(){
        this.showEdit = true;
        this.$nextTick(function(){
          this.$refs.editRef.open()
        })
      
    },
    handleEdit(row){
      this.showEdit = true;
        this.$nextTick(function(){
          this.$refs.editRef.open('edit').setFormData(row)
        })
        
    },
    async handleDelete(id){
        await feedback.confirm('确定要删除？')
        const res = await api.menu.delete({id})
        if(res.error){
            feedback.error(res.msg)
        }
        this.getLists()
    }
  },
};
</script>
